* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.common {
	border: 1px solid #000;
	border-image-source: url('../images/border.png');
	border-image-slice: 41 31 51 107;
	border-width: 41px 31px 51px 107px;
	border-image-width: 41px 31px 51px 107px;
}
.inner {
	// background-color: red;
	position: absolute;
	left: -87px;
	bottom: -40px;
	top: -31px;
	right: -11px;
}
body {
	background-image: url('../images/bg.jpg');
}
@keyframes move {
	from {
	}
	to {
		transform: translateY(-50%);
	}
}
.layout {
	min-width: 1024px;
	max-width: 1920px;
	min-height: 780px;
	background: url('../images/logo.png') no-repeat center top;
	margin: auto;
	padding: 80px 10px 0;
	display: flex;
	.left {
		flex: 3;
		flex-direction: column;
		.sum {
			display: flex;
			position: relative;
			height: 70px;
			margin-bottom: 16px;
			.inner {
				// background-color: red;
				display: flex;
				justify-content: space-around;
				.item {
					h2 {
						padding-top: 15px;
						color: #fff;
						font-size: 22px;
					}
					span {
						color: #4f88d1;
						font-size: 12px;
					}
				}
			}
		}
		.fault {
			height: 320px;
			margin-bottom: 16px;
			position: relative;
			.inner {
				.Tab {
					padding: 10px 0;
					a {
						font-size: 14px;
						padding: 0 12px;
						color: #1950c4;
					}
					a.active {
						color: #fff;
					}
					:nth-child(1) {
						border-right: 2px solid #00f2f1;
					}
				}
				.content {
					display: none;
					color: #4f88d1;
					.menu {
						padding: 0 20px;
						height: 36px;
						line-height: 36px;
						background-color: #1b1d27;
						text-align: center;

						span {
							padding: 0 50px 0 0;
							font-size: 16px;
						}
					}
					.list {
						padding: 12px 20px;
						overflow: hidden;
						height: 200px;
						ul {
							animation: move 9s linear infinite;
							li {
								position: relative;
								span {
									font-size: 12px;
									padding: 0 55px 0 0;
								}
								.icon-dot {
									position: absolute;
									display: none;
									left: -13px;
									top: 6px;
								}
							}
							:hover .icon-dot {
								display: block;
							}
						}
						:hover {
							animation-play-state: paused;
						}
					}
				}
			}
		}
		.census {
			height: 227px;
			position: relative;
			.inner {
				display: flex;
				flex-direction: column;
				h2 {
					color: #fff;
					font-size: 16px;
					padding: 15px 5px;
				}
				.site {
					display: flex;
					.draw {
						flex: 6;
						// background-color: red;
					}
					.number {
						flex: 2;
						padding: 12px 10px;
						background-image: url('../images/rect.png');
						.item {
							padding-bottom: 15px;
							h3 {
								font-size: 26px;
								color: #fff;
							}
							span {
								font-size: 12px;
							}
						}
						:nth-child(2) {
							padding-bottom: 0;
						}
					}
				}
			}
		}
	}
	.center {
		flex: 4;
		flex-direction: column;
		padding: 36px 20px 0;
		.map {
			margin-bottom: 10px;
			color: #fff;
			.city-map {
				height: 382px;
				// background-color: yellow;
			}
		}
		.graph {
			height: 227px;
			position: relative;
			.inner {
				display: flex;
				flex-direction: column;
				h2 {
					color: #fff;
					font-size: 18px;
					padding: 15px 5px;
				}
				.city-census {
					display: flex;
					// flex-direction: row;
					.bar-chart {
						flex: 6;
						// background-color: red;
					}
					.num {
						flex: 2;
						padding: 12px 10px;
						background-image: url('../images/rect.png');
						.item {
							padding-bottom: 15px;
							h3 {
								font-size: 26px;
								color: #fff;
							}
							span {
								font-size: 12px;
							}
						}
						:nth-child(2) {
							padding-bottom: 0;
						}
					}
				}
			}
		}
	}
	.right {
		flex: 3;
		flex-direction: column;
		.data {
			height: 100px;
			margin-bottom: 10px;
			position: relative;
			.inner {
				display: flex;
				flex-direction: column;
				.time {
					a {
						color: #1950c4;
						padding: 0 8px;
						border-right: 2px solid #00f2f1;
					}
					a.active {
						color: #fff;
					}
					:nth-child(4) {
						border-right: 0;
					}
				}
				.sell {
					display: flex;
					padding-top: 10px;
					justify-content: start;
					.item {
						padding: 0 80px 0 40px;
						h3 {
							color: #fff;
						}
						span {
							color: #1950c4;
							font-size: 12px;
						}
					}
				}
			}
		}
		// 销售额统计
		.sales {
			height: 164px;
			margin-bottom: 10px;
			position: relative;
			.inner {
				display: flex;
				flex-direction: column;
				.year {
					display: flex;
					margin-top: 10px;
					h2 {
						color: #fff;
						font-size: 20px;
						padding: 0 10px;
						margin-right: 5px;
						border-right: 2px solid #00f2f1;
					}
					.l {
						a {
							padding: 0 10px;
						}
						a.active {
							background-color: #00f2f1;
							color: #fff;
						}
					}
				}

				.line {
					flex: 1;
					// background-color: red;
				}
			}
		}
		// 渠道分布
		.range {
			display: flex;
			height: 164px;
			margin-bottom: 10px;
			.spread {
				flex: 1;
				position: relative;
				.inner {
					// background-color: red;
					position: absolute;
					left: -87px;
					bottom: -40px;
					top: -31px;
					right: -11px;
					h2 {
						font-size: 16px;
						color: #fff;
						padding: 7px 10px;
					}
					.sky {
						display: flex;
						flex-wrap: wrap;
						.item {
							width: 50%;
							padding: 0 15px;
							h3 {
								color: #fff;
								font-size: 12px;
								span {
									font-size: 23px;
									padding-right: 5px;
								}
							}
							span {
								color: #265698;
								font-size: 12px;
							}
						}
					}
				}
			}
			.rate {
				margin-left: 20px;
				flex: 1;
				position: relative;
				.inner {
					// background-color: red;
					position: absolute;
					left: -87px;
					bottom: -40px;
					top: -31px;
					right: -11px;
					display: flex;
					flex-direction: column;
					h2 {
						color: #1950c4;
						font-size: 16px;
						padding: 8px 6px 0;
					}
					.pre {
						position: relative;
						height: 62px;
						span {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -20%);
							color: #fff;
						}
						.circle {
							height: 100%;
						}
					}
					.money {
						display: flex;
						.item {
							h3 {
								font-size: 20px;
								color: #fff;
							}
							span {
								font-size: 12px;
								margin-right: 9px;
								color: #1950c4;
							}
						}
					}
				}
			}
		}
		.rank {
			height: 215px;
			position: relative;
			.inner {
				display: flex;
				.hot {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					h3 {
						color: #1950c4;
						font-size: 16px;
					}
					span {
						color: #1950c4;
						font-size: 12px;
						i {
							margin-right: 12px;
						}
					}
				}
				.city {
					display: flex;
					flex-direction: column;
					margin-left: 50px;
					margin-top: 17px;
					h3 {
						color: #1950c4;
						font-size: 16px;
					}
					.scale {
						margin-top: 10px;
						li {
							padding: 6px 0;
							font-size: 12px;
							color: #1950c4;
							span {
								padding-right: 39px;
							}
						}
					}
				}
				.day {
					margin-top: 17px;
					h3 {
						color: #1950c4;
						font-size: 16px;
					}
					.scale {
						margin-top: 10px;
						li {
							padding: 6px 0;
							font-size: 12px;
							color: #1950c4;
							span {
								padding-right: 21px;
							}
						}
					}
				}
			}
		}
	}
}
